<!DOCTYPE html>
<html lang="en">
<!-- 获取到表单中的属性为name的所有元素? -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <form class="element">
        <input type="text" name="user" value="Alice">
        <input type="text" name="user[1][name]" value="Bob">
        <input type="text" name="user[0][age]" value="30">
        <input type="text" name="user[1][age]" value="25">
        <button type="submit">Submit</button>
    </form>
    <button id="button">按钮</button>
    <script>
        // 第一种方法获取到表单中的所有元素
        // const inputs = document.querySelectorAll('.element input');
        // inputs.forEach(input=>{
        //     console.log(`name为:${input.name}`);

        // })

        // 第二种方法   包含user的name属性的元素 input[name*="user"]
        const inputs = document.querySelectorAll('.element input[name*="user"]')
        inputs.forEach(input => {
            console.log(`name为:${input.name}`);
        })

        // jquery代码
        $('#button').click(function () {
            alert('Button clicked!');
        });
    </script>
</body>

</html>